<template>
  <div class="app-container" style="width:100%;height:100%;">
    <el-aside style="padding-right: 10px; padding-left: 15px; padding-top: 0px;float:left;width:75%;height:100%;background:none;">
      <div>
        <img
          v-if="!fileType"
          style="position: absolute;top:18px;"
          src="../../../assets/images/Folder-02.png"
          width="18px"
          height="18px"
        >
        <img
          v-else-if="fileType==='docx' || fileType==='doc'"
          style="position: absolute;top:18px;"
          src="../../../assets/images/Word.png"
          width="18px"
          height="18px"
        >
        <img
          v-else-if="fileType==='xlsx' || fileType==='xls'"
          style="position: absolute;top:18px;"
          src="../../../assets/images/Excel.png"
          width="18px"
          height="18px"
        >
        <img
          v-else-if="['png','jpeg','jpg'].includes(fileType)"
          style="position: absolute;top:18px;"
          src="../../../assets/images/Picture.png"
          width="18px"
          height="18px"
        >
        <img
          v-else-if="fileType==='pdf'"
          style="position: absolute;top:18px;"
          src="../../../assets/images/PDF.png"
          width="18px"
          height="18px"
        >
        <img
          v-else-if="fileType==='ppt' || fileType==='pptx'"
          style="position: absolute;top:18px;"
          src="../../../assets/images/PPT.png"
          width="18px"
          height="18px"
        >
        <img
          v-else-if="fileType==='txt'"
          style="position: absolute;top:18px;"
          src="../../../assets/images/TXT.png"
          width="18px"
          height="18px"
        >
        <img
          v-else-if="['zip','rar','7z'].includes(fileType)"
          style="position: absolute;top:18px;"
          src="../../../assets/images/Zip.png"
          width="18px"
          height="18px"
        >
        <img
          v-else-if="['mp4','mpeg','avi','navi','asf','mov','3gp','wmv','divx','xvid','rm','rmvb','flv','f4v'].includes(fileType)"
          style="position: absolute;top:18px;"
          src="../../../assets/images/Video.png"
          width="18px"
          height="18px"
        >
        <img
          v-else-if="['mp3','flac','wav','flac'].includes(fileType)"
          style="position: absolute;top:18px;"
          src="../../../assets/images/Voice.png"
          width="18px"
          height="18px"
        >
        <img
          v-else
          style="position: absolute;top:18px;"
          src="../../../assets/images/Unknown.png"
          width="18px"
          height="18px"
        >
        <label style="margin-left:22px; color: #555555;">
          <span>{{ originalName }}</span>
        </label>
      </div>

      <div class="box1" style="margin:0px;padding:0px;font-size: 12px; color: #939dc1;float: left;">
        <label style="padding-right:20px;border-right:2px solid #ccc;">
          <i class="el-icon-user-solid" />
          <span style="padding-left:5px;">{{ createuserName }}</span>
        </label>
        <label style="padding-left:20px;padding-right:20px;">
          <i class="el-icon-date" />
          <span style="padding-left:5px;">{{ createtimeTi | parseTime('{y}-{m}-{d}') }}</span>
        </label>
      </div>
      <div class="box2">
        <el-tooltip class="item" effect="light" content="下载" placement="top">
          <el-button class="filter-item" icon="el-icon-download" type="primary" @click.stop="download(scope)">
            下载
          </el-button>
        </el-tooltip>
      </div>
      <hr>
      <div style="margin-top:10px;">
        <div v-if="fileType === 'pdf'" class="pdf" style="text-align: center;">
          <iframe :src="url" type="application/x-google-chrome-pdf" width="100%" :height="tableHeight4" />
        </div>

        <div v-else-if="['png','jpeg','jpg'].includes(fileType)" style="text-align: center;">
          <viewer>
            <img :src="url">
          </viewer>
        </div>

        <div v-else-if="['mp4','mpeg','avi','navi','asf','mov','3gp','wmv','divx','xvid','rm','rmvb','flv','f4v'].includes(fileType)" style="text-align: center;">
          <video-player
            ref="videoPlayer"
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="playerOptions"
            :height="tableHeight4"
            @ready="playerReadied"
            @timeupdate="onPlayerTimeupdate($event)"
          />
        </div>

        <div v-else-if="['mp3','flac','wav','flac'].includes(fileType)" style="text-align: center;">
          <audio ref="audio" :src="url" autoplay="autoplay" style="width: 80%;" controls="controls" :height="tableHeight4" />
        </div>

        <div v-else class="pdf">
          <span>当前文件不支持在线预览，请下载后查看！</span>
        </div>
      </div>
    </el-aside>
    <el-aside style="padding-right: 5px; padding-left: 5px; padding-top: 0px;float:left;width:25%;background:none;">
      <el-card class="box-card" style="width:100%;">
        <div slot="header" class="clearfix">
          <img
            style="position: absolute;top:34px;"
            src="../../../assets/images/Discuss.png"
            width="18px"
            height="18px"
          >
          <span style="margin-left:25px;">评论</span>
          <el-button style="float: right; padding: 8px 0" type="text" @click.stop="evaluate">添加评论</el-button>
        </div>
        <div>
          <span style="padding-left: 10px;padding-right: 10px;">星级评价</span>
          <el-rate v-model="evaluationScore" :disabled="true" />

          <el-table v-loading="listLoading" :data="list" :height="tableHeight2" style="width: 100%;margin-top:10px; overflow:auto">
            <el-table-column align="center" label="评价人" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.evaluatorName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="评价时间" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.createtimeTi }}</span>
              </template>
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="评价意见">
                    <span>{{ props.row.message }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </el-card>
    </el-aside>

    <el-dialog
      :visible.sync="evaluateVisible"
      width="600px"
      append-to-body
      :show-close="false"
      :title="'评价'"
      :close-on-click-modal="false"
    >
      <evaluate
        v-if="evaluateVisible"
        ref="evaluate"
        :proid="code"
        :visible.sync="evaluateVisible"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getInfo, downloadFile, saveQuantity, saveRecords } from '@/api/publicFile'
import { tableHeight4, tableHeight2 } from '@/utils/tableHeight'
import { getEvaluateList } from '@/api/publicFileEvaluate'

import evaluate from '../../overtInfo/bmwd/evaluate' // eslint-disable-line no-unused-vars

export default {
  components: { evaluate },
  mixins: [tableHeight4, tableHeight2],
  provide() {
    return {
      getList: this.loadList
    }
  },
  data() {
    return {
      listLoading: false,
      url: '',
      fileType: '',
      menuId: '',
      originalName: '',
      createtimeTi: '',
      createuserName: '',
      playerOptions: {
        // 播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        // 如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto',
        language: 'zh-CN',
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: '16:9',
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        sources: [{
          // 类型
          type: '',
          // url地址
          src: ''
        }],
        controls: true,
        poster: '',
        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        // notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true, // 时间分割线
          durationDisplay: true, // 总时间
          remainingTimeDisplay: true, // 剩余播放时间
          progressControl: true, // 进度条
          fullscreenToggle: true // 全屏按钮
        }
      },
      evaluateVisible: false,
      reverse: true,
      list: [],
      evaluationScore: ''
    }
  },
  created() {
    this.menuId = this.$route.query.menuId
    getInfo({ code: this.$route.query.menuId }).then(response => {
      this.url = response.data[0].url
      this.fileType = response.data[0].suffix
      this.originalName = response.data[0].originalName
      this.createuserName = response.data[0].createuserName
      this.createtimeTi = response.data[0].createtimeTi

      this.playerOptions.sources.push(response.data[0].suffix)
      this.playerOptions.sources.push(response.data[0].url)
      this.playerOptions.poster = response.data[0].url

      this.loadList()
    }).catch(function() {
    })
  },
  methods: {
    loadList() { // 加载列表
      this.list = []
      this.listLoading = true

      getEvaluateList({ fileId: this.menuId }).then(response => {
        const { data } = response

        this.list = data.publicFileEvaluate
        this.evaluationScore = data.evaluationScore
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    evaluate() {
      this.evaluateVisible = true
      this.code = this.menuId
      this.$nextTick(() => {
        this.$refs.evaluate
      })
    },
    /* 获取视频播放进度 */
    onPlayerTimeupdate(player) {
      this.gklog = player.cache_.currentTime
      console.log(' onPlayerTimeupdate!', this.gklog)
    },
    /* 设置视频进度 */
    playerReadied(player) {
      player.currentTime(this.gklog)
    },
    // 播放组件
    handlePlay(row) {
      this.src = row.filePath
      this.play()
    },
    // 播放
    play() {
      this.$refs.audio.play()
    },
    // 音频暂停
    stop() {
      this.$refs.audio.pause()
      this.$refs.audio.currentTime = 0
    },
    download(scope) {
      const loading = this.$loading({
        lock: true,
        text: '下载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      downloadFile({ id: this.menuId }).then(response => {
        loading.close()
        var fileName = this.originalName
        const contentDisposition = response.headers['content-disposition']
        if (contentDisposition) {
          fileName = window.decodeURI(response.headers['content-disposition'].split('=')[1], 'UTF-8')
        }
        const blob = new Blob([response.data], {
          type: `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` // word文档为msword,pdf文档为pdf
        })
        const objectUrl = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = objectUrl
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        // 释放内存
        window.URL.revokeObjectURL(link.href)

        saveQuantity({ fileId: scope.row.id, downloads: '1' }).then(response => {
        })

        saveRecords({ fileId: scope.row.id, flag: '2' }).then(response => {
        })
      })
    }
  }
}
</script>

<style lang="scss"  scopes>
.app-container {
  padding: 10px 5px 10px 5px;
}
#de{
  ul,li{
    list-style: none !important;
  }
    .image-list{
    margin: 0; padding: 0
  }
  li {
    display: inline-block;
    margin: 0 10px;
    position: relative;
  }
  .image-list li img {
    box-shadow: 0 0 5px #333;
  }
  .icon-remove{
    width: 20px; height:20px;
    text-align: center; line-height: 20px;
    background:#f33;
    position:absolute; top:-10px; right:-10px;
    border-radius: 10px;
    cursor: pointer;
    color:#fff;
  }
  a {
    color: #42b983;
  }
}

.box1 {
  flex: 1;
  vertical-align: middle;
}
.box2 {
  flex: 1;
  text-align: end;
}
.el-input >>> .el-input__inner{
  height: 30px;
}
.demo {
  display: inline-block;
  width: 100%;
  height: auto;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
}
.demo:hover {
  display: block;
}
.vjs-custom-skin > .video-js .vjs-big-play-button {
  transform: scale(0.6) !important;
}
.el-card__header {
  padding: 15px 20px;
  border-bottom: 1px solid #e6ebf5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-card__body {
  padding: 10px;
}
.el-table__expanded-cell[class*=cell] {
  padding: 10px 20px;
}
</style>
